
// 导入相关的模块
var path = require('path');
// 导入我的插件
var htmlWebpackPlugin = require('html-webpack-plugin');



module.exports = {
    // 设置打包为开发模式
    mode: 'development',
    // 设置我的项目入口文件
    entry: path.join(__dirname, './src/js/index.js'),
    // 配置输出选项指定打包到哪一个目录
    output: {
        path: path.join(__dirname, './dist'), //打包的目录
        filename: 'main.js'  //打包后的文件名字
    },
    // 一般的webpack插件都会陪值在这个节点
    plugins: [
        new htmlWebpackPlugin({
            // 指定模板的路径
            template: path.join(__dirname, './src/index.html'),
            // 设置生成页面的名称
            filename: 'index.html'
        })
    ],
    // 用来配置我的样式，，第三方的loader模块
    module: {
        // 模块的匹配规则
        rules: [
            //加载我的css 
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            // 加载我的less
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            // 加载我的sass
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // 加载我的css里面的图片路径等等
            { test: /\.(png|jpg|gif|jpeg|bmp|svg)$/, use: ['url-loader?limit=1000&name=[hash:8][name].[ext]'] },
            // 加载我的字体文件
            { test: /\.(ttf|woff|woff2|eot)$/, use: ['url-loader'] },
            // 加载我的js高级语法 es6
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
    }
}
